<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>众筹</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>

    <style>
        .focus {
            width: 100%;
            height: 2.4rem;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .focus .hd {
            width: 100%;
            height: 11px;
            position: absolute;
            z-index: 1;
            bottom: 5px;
            text-align: center;
        }

        .focus .hd ul {
            display: inline-block;
            height: 5px;
            padding: 3px 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 0;
            vertical-align: top;
        }

        .focus .hd ul li {
            display: inline-block;
            width: 5px;
            height: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: #8C8C8C;
            margin: 0 5px;
            vertical-align: top;
            overflow: hidden;
        }

        .focus .hd ul .on {
            background: #fff;
        }

        .focus .bd {
            position: relative;
            z-index: 0;
        }

        .focus .bd li img {
            width: 100%;
            height: 2.4rem;
            background: url(images/loading.gif) center center no-repeat;
        }

        .focus .bd li a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            /* 取消链接高亮 */
        }
    </style>
</head>

<body>


    <!--正文-->
    <div class="All-the-chips-info bc-gray">
        <div id="focus" class="focus">
            <div class="hd">
                <ul></ul>
            </div>
            <div class="bd">
                <ul>
                  
                </ul>
            </div>
        </div>
        <section class="section-1">
            <p class="tip">内容内容内容内容内容内容内容内容内容内容内容内容</p>
            <p class="t1 flex">
                <span style="color:rgba(18,18,18,0.25);" class="add_good">12</span>
                <em class="add_collection">12</em>
            </p>
            <p class="rage">
                <progress id="myProgress" value="0" max="100" style="width:3rem"></progress><span style="float:right;"></span>
            </p>
            <div class="b-tab flex">
                <div>
                    <p class="p1">支持人数</p>
                    <p class="p2" id="supportNum">1544人</p>
                </div>
                <div>
                    <p class="p1">已筹金额</p>
                    <p class="p2" id="amountaofmoney">31.08万元</p>
                </div>
                <div>
                    <p class="p1">剩余时间</p>
                    <p class="p2" id="last_time">26天</p>
                </div>
            </div>
        </section>
        <section class="section-2">
            <h4>产品详情</h4>
            <img src="../img/配图@2x 2.png" />
            <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字… </p>
        </section>
        <section class="section-3 flex">
            <div class="left">结束前提醒</div>
            <div class="right">去支持</div>
        </section>

        <section class="bottom_box">
            <div class="title">选择项目回报（10）<img src="../img/关闭@2x.png" alt="" style="width:.16rem;height:.16rem;float:right;"></div>
            <p class="t1">回报一</p>
            <div class="info clearfix">
                <img src="../img/配图@2x.png" alt="">
                <div class="right">
                    <div class="top">感谢您的喜爱和支持，您将以300元的惊喜众筹价获得原价800元的XXX。</div>
                    <div class="bottom">￥300</div>
                </div>
            </div>
            <p class="t2" style="margin-top:.26rem;margin-bottom:.15rem;">项目回报</p>
            <div class="price">
                <span class="active">￥100</span>
                <span>￥100</span>
                <span>￥100</span>
                <span>￥100</span>
                <span>￥100</span>
                <span>￥100</span>
            </div>
            <button>立即认筹</button>
        </section>

    </div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>


    <script>
        $(function () {
            // 点击综合推荐
            $('.hd span').click(function () {
                $(this).toggleClass('active').siblings().removeClass('active');
                $('.mask').fadeToggle();
                var idx = $(this).index();
                $('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');

                $(this).toggleClass('arrow-top')

            })
            $('.td1 ul li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                $('.mask').hide();
                $('.td>div').removeClass('active');
            })
            $('.section-3 .right').click(function () {
                $('.bottom_box').css('bottom', '0')
            })
            $('.bottom_box .title img').click(function () {
                $('.bottom_box').css('bottom', '-10000px')
            })



        })
    </script>

    <script>
        $(function () {
            let cf_id = getQueryString('cf_id');
            var p_id;

            $.ajax({
                url: base_url + 'ZITAOHUI/cowdFundingDetail',
                data: {
                    cfid: cf_id
                },
                success: function (data) {
                    console.log(data)
                    // 缓存轮播图的数据
                    let img_arr = data.extend.data[0];
                    for (let j = 0; j < img_arr.length; j++) {
                        let li = $('<li><a href="#"><img _src="' + img_arr[j].images +
                            '" src="images/blank.png" /></a></li>')
                        $('#focus .bd ul').append(li)
                    }



                    // 储存接口提供的所有数据,除轮播图
                    let datas = data.extend.data[1];

                    p_id = datas.produceId;

                    // 计算目前众筹的进度
                    let all_price = datas.targetAmount; // 总金额
                    let now_price = datas.amountaofmoney; // 目前募集到的金额
                    let rate = (now_price / all_price) * 100
                    $('progress').attr('value', rate).siblings('span').html(rate + '%')

                    // 填充支持人数，已有金额
                    $('#supportNum').html(datas.supportNum + '人')
                    $('#amountaofmoney').html(datas.amountaofmoney + '元')

                    $('.section-2 img').attr('src', datas.produceHeadImages);
                    $('.section-2 p').attr('src', datas.produceDiscribe);

                    // 计算剩余时间
                    let time = datas.endTime - datas.startTime;
                    time = Math.abs(time)
                    // 换算成秒
                    time = time / 1000;
                    // 换算成天数
                    time = time / 86400;
                    if (time > 1) { // 大于一天
                        time = Math.ceil(time)
                        $('#last_time').html(time + '天')
                    } else if (time > 0 && time < 1) { //小于一天
                        // ...
                    }
                    console.log(time)

                }
            })

            var way = {
                // 点赞
                add_goog: function (id1, aim) {
                    console.log(aim)
                   
                    $.ajax({
                        url: base_url + 'ZITAOHUI/goodNum',
                        data: {
                            produceId: id1,
                            user_id: u_id
                        },
                        success: function (data) {
                            console.log(data)
                            let sun = data.extend.haha;
                            // sun = sun.haha.list;
                            if (sun == 1) {
                                aim.html(parseFloat(aim.html())+1);
                            } else if (sun == 2) {
                                alert('网络不好，请稍后再试')
                            } else {
                                alert('您已经对该商品点过赞啦')
                            }
                        },
                        error: (data) => console.log(data)
                    })
                },
                // 添加收藏
                add_collection: function (id, aim) {
                    $.ajax({
                        url: base_url + 'ZITAOHUI/conllectionNum',
                        data: {
                            produceId: id,
                            user_id: u_id
                        },
                        success: {
                            function (data) {
                                // console.log(data)
                                let sun = data.data.extend;
                                sun = sun.list.conllection;
                                if (sun == 1) {
                                    aim.html(parseFloat(aim.html())+1);
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过收藏啦')
                                }
                            }
                        }
                    })
                }
            }

            $('.add_good').click(function () {
                way.add_goog(p_id, $(this))
            })


        })
    </script>
    <script src="../js/TouchSlide.1.1.js"></script>
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                TouchSlide({
                    slideCell: "#focus",
                    titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                    mainCell: ".bd ul",
                    effect: "left",
                    autoPlay: true, //自动播放
                    autoPage: true, //自动分页
                    switchLoad: "_src" //切换加载，真实图片路径为"_src" 
                });
            }, 800);
        })
    </script>
</body>

</html>